<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Spring MVC 4 + Ajax Hello World</title>

    <link href="<c:url value='/resources/core/css/bootstrap.min.css' />" rel="stylesheet"/>
    <script href="<c:url value='/resources/core/js/bootstrap.min.js'/>"></script>
    <script href="<c:url value='/resources/core/js/jquery.1.10.2.min.js' />"></script>

</head>

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">HTS</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <%--<li class="active"><a href="#">现货</a></li>--%>
                <li><a href="#">现货</a></li>
                <%--<li><a href="#">入库管理</a></li>--%>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        采购 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">新增</a></li>
                        <li><a href="#">记录</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        销售 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">新增</a></li>
                        <li><a href="#">记录</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/goto?url=welcome"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a href="/goto?url=welcome"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container" style="min-height: 500px">

    <div class="starter-template">
        <h1>Login</h1>
        <br>

        <div id="feedback"></div>

        <form class="form-horizontal" id="search-form">
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type=text class="form-control" id="username">
                </div>
            </div>
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="email">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" id="bth-search"
                            class="btn btn-primary btn-lg">Login</button>
                </div>
            </div>
        </form>

    </div>

</div>

<div class="container">
    <footer>
        <p>
            <%--&copy; <a href="http://www.mkyong.com">Mkyong.com</a> 2015--%>
        </p>
    </footer>
</div>

<script>
    jQuery(document).ready(function($) {

        $("#search-form").submit(function(event) {

            // Disble the search button
            enableSearchButton(false);

            // Prevent the form from submitting via the browser.
            event.preventDefault();

            searchViaAjax();

        });

    });

    function searchViaAjax() {

        var search = {}
        search["username"] = $("#username").val();
        search["email"] = $("#email").val();

        $.ajax({
            type : "POST",
            contentType : "application/json",
            url : "${home}search/api/getSearchResult",
            data : JSON.stringify(search),
            dataType : 'json',
            timeout : 100000,
            success : function(data) {
                console.log("SUCCESS: ", data);
                if (data.code == 200) {
                    login();
                } else  {
                    display(data);
                }
            },
            error : function(e) {
                console.log("ERROR: ", e);
                display(e);
            },
            done : function(e) {
                console.log("DONE");
                enableSearchButton(true);
            }
        });

    }

    function enableSearchButton(flag) {
        $("#btn-search").prop("disabled", flag);
    }

    function display(data) {
        var json = "<h4>Ajax Response</h4><pre>"
                + JSON.stringify(data, null, 4) + "</pre>";
        $('#feedback').html(json);
    }
    function login() {
        window.location.href="${home}goto?url=RTGoods";
        <%--window.location.href="<c:url value = "RTGoods";--%>
    }
</script>

</body>
</html>